<template>
  <div class="people">
    <h1>添加操作人员</h1>
    <el-form :model="adminlist" label-width="120px" status-icon :rules="rules">
      <el-form-item label="姓名" prop="adminname">
        <el-input v-model="adminlist.adminname" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="adminlist.password" />
      </el-form-item>
      <el-form-item label="角色">
        <el-radio-group v-model="adminlist.role">
          <el-radio :label="1">超级管理员</el-radio>
          <el-radio :label="2">普通管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <p>
        <el-tree
          ref="treeRef"
          :data="data"
          show-checkbox
          node-key="id"
          highlight-current
        />
      </p>
      <el-form-item>
        <el-button type="primary" @click="addAdmin">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import service from "../../../utlis/service";
import { reactive, ref } from "vue";
import { ElMessage, ElTable, ElTree } from "element-plus";
import { menudata as data } from "../../../grants/menudata";
import "element-plus/es/components/notification/style/css";
import type { TreeKey } from "element-plus/es/components/tree/src/tree.type";
// 在setup函数里（setup语法糖里），如果想使用路由对象。
import { useRouter } from "vue-router";
const $router = useRouter();
interface IAdmin {
  adminname: string;
  password: string;
  role: number; //1:表示超级管理员，2：普通管理员
  checkedKeys: TreeKey[];
}
// 当前管理员的数据
const adminlist = reactive<IAdmin>({
  adminname: "",
  password: "",
  role: 1,
  checkedKeys: [],
});
const validateName = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("密码不能为空"));
  }
  else if (/^[\w-]{4,16}$/.test(value) == false) {
    callback(new Error("请输入正确的账号"));
  } else {
    callback();
  }
};
const validatePssword = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("密码不能为空"));
  }
  else if (/^\d{6}$/.test(value) == false) {
    callback(new Error("请输入符合要求的密码,数字和字母组合"));
  } else {
    callback();
  }
};

//表单验证规则
const rules = reactive({
  adminname: [{ validator: validateName, trigger: "blur" }],
  password: [{ validator: validatePssword, trigger: "blur" }],
});

let treeRef = ref<InstanceType<typeof ElTree>>();
const addAdmin = () => {
  //获取的是选中状态的菜单栏
  let arr:TreeKey[] = treeRef.value!.getCheckedKeys();//获取的是选中状态的菜单项。

    let halfArr:TreeKey[] = treeRef.value!.getHalfCheckedKeys();//获取半选中状态的菜单项。

    arr = arr.concat(halfArr);

  arr = arr.concat(halfArr);
  adminlist.checkedKeys = arr;

  console.log("arr", arr);

  service({
    url: "/admin/add",
    method: "post",
    data: adminlist,
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "亲，恭喜您，添加成功！",
        type: "success",
      });

      $router.push("/Adman/Administrator");
    }
  });
};
</script>

<style scoped>
.people {
  width: 500px;
  height: 600px;
  margin: 20px auto;
}
h1 {
  text-align: center;
  margin-top: 0;
}
p {
  margin-left: 30px;
}
</style>